<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易 Postman - jQuery 测试接口</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        label {
            display: block;
            margin-top: 15px;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
        }
        button {
            margin-top: 15px;
            padding: 10px 20px;
        }
        #response {
            margin-top: 20px;
            white-space: pre-wrap;
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>

<h2>HTTP 请求测试工具（类似 Postman）</h2>

<label for="url">URL:</label>
<input type="text" id="url" placeholder="例如：https://api.example.com/data/1">

<label for="method">方法:</label>
<select id="method">
    <option value="GET">GET</option>
    <option value="POST">POST</option>
    <option value="PUT">PUT</option>
    <option value="DELETE">DELETE</option>
</select>

<label for="data">请求体 (JSON，适用于 POST / PUT):</label>
<textarea id="data" rows="5" placeholder='例如：{"name":"张三","age":25}'></textarea>

<button id="sendRequest">发送请求</button>

<div id="response"><strong>响应结果将显示在这里...</strong></div>

<script>
    $(document).ready(function () {
        $('#sendRequest').click(function () {
            const url = $('#url').val().trim();
            const method = $('#method').val();
            const dataStr = $('#data').val().trim();

            if (!url) {
                alert("请输入 URL");
                return;
            }

            let contentType = "application/json; charset=utf-8";
            let dataType = "json";
            let data = {};

            if ((method === "POST" || method === "PUT") && dataStr) {
                try {
                    data = JSON.parse(dataStr);
                } catch (e) {
                    alert("请求体不是有效的 JSON 格式");
                    return;
                }
            }

            $.ajax({
                url: url,
                method: method,
                contentType: contentType,
                dataType: dataType,
                data: method === "GET" ? undefined : JSON.stringify(data),
                success: function (response, textStatus, jqXHR) {
                    $('#response').html(
                        `状态码: ${jqXHR.status}\n\n` +
                        `响应内容:\n${JSON.stringify(response, null, 2)}`
                    );
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#response').html(
                        `状态码: ${jqXHR.status}\n\n` +
                        `错误信息:\n${errorThrown}\n\n` +
                        `响应内容:\n${jqXHR.responseText}`
                    );
                }
            });
        });
    });
</script>

</body>
</html>